<template>
  <div>
    <div class="typeContainer">
      <div class="titleName">
        {{ this.$route.params.name }}
      </div>
    </div>
    <div class="articleList" v-for="item in article" :key="item.id">
      <a @click="goReadArticle(item.id)">
        <h1 class="title">{{ item.title }}</h1>
      </a>
      <div class="time">发布于 {{ item.time }}</div>
      <p class="content">{{ item.content }}</p>
      <div class="descript">[ {{ item.descript }} ]</div>
      <div class="read" @click="goReadArticle(item.id)">阅读全文 >></div>
      <span></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Type",
  data() {
    return {
      article: [],
    };
  },
  methods: {
    goReadArticle(id) {//跳转到文章详情页
      this.$router.push("/article/" + id);
    },
  },
  mounted() {
    // console.log(this.$route.params.name);
  },
  watch: {
    "$route.path": {//监听路径的变化 添加相应文章
      handler() {
        if (this.$route.params.name === "study") {
          this.article = [];
          this.article.push(
            {
              title: "你们要的学习方法来了",
              time: new Date().toLocaleDateString(),
              content: "学习不应该是沉重的负担，而是愉悦的冒险",
              descript: "学习",
              id: Math.random() * 1000,
            },
            {
              title: "你们要的学习方法来了",
              time: new Date().toLocaleDateString(),
              content: "学习不应该是沉重的负担，而是愉悦的冒险",
              descript: "学习",
              id: Math.random() * 1000,
            },
            {
              title: "你们要的学习方法来了",
              time: new Date().toLocaleDateString(),
              content: "学习不应该是沉重的负担，而是愉悦的冒险",
              descript: "学习",
              id: Math.random() * 1000,
            }
          );
        } else if (this.$route.params.name === "net") {
          this.article = [];
          this.article.push(
            {
              title: "http协议中的缓存",
              time: new Date().toLocaleDateString(),
              content:
                "在一个C/S结构中，最基本的缓存分为两种： 客户端缓存 服务器缓存 本文仅讨论客户端缓存 所谓客户端缓存，顾名思义，是将某一次的响应结果保存在客户端（比如浏览器）中，而后续的请求仅需要从缓存中读取即可，极大的降低了服务器的处理压力。",
              descript: "网络",
              id: Math.random() * 1000,
            },
            {
              title: "JWT原理详解",
              time: new Date().toLocaleDateString(),
              content:
                "随着前后端分离的发展，以及数据中心的建立，越来越多的公司会创建一个中心服务器，服务于各种产品线。 而这些产品线上的产品，它们可能有着各种终端设备，包括但不仅限于浏览器、桌面应用、移动端应用、平板应用、甚至智能家居。 当这种结构出现后，就出现一个问题：它们之间还能使用传统的cookie方式传递令牌信息吗？",
              descript: "网络",
              id: Math.random() * 1000,
            }
          );
        } else if (this.$route.params.name === "front") {
          this.article = [];
          this.article.push(
            {
              title: "Promise A+ 规范和解读",
              time: new Date().toLocaleDateString(),
              content: "一开始我想把原文翻译过来即可，后面发现太麻烦了",
              descript: "前端",
              id: Math.random() * 1000,
            },
            {
              title: "Promise A+ 规范和解读",
              time: new Date().toLocaleDateString(),
              content: "一开始我想把原文翻译过来即可，后面发现太麻烦了",
              descript: "前端",
              id: Math.random() * 1000,
            },
            {
              title: "Promise A+ 规范和解读",
              time: new Date().toLocaleDateString(),
              content: "一开始我想把原文翻译过来即可，后面发现太麻烦了",
              descript: "前端",
              id: Math.random() * 1000,
            }
          );
        } else if (this.$route.params.name === "binary") {
          this.article = [];
          this.article.push(
            {
              title: "小数的二进制存储",
              time: new Date().toLocaleDateString(),
              content: "今天我们来学习关于小数的二进制的知识",
              descript: "进制",
              id: Math.random() * 1000,
            },
            {
              title: "小数的二进制存储",
              time: new Date().toLocaleDateString(),
              content: "今天我们来学习关于小数的二进制的知识",
              descript: "进制",
              id: Math.random() * 1000,
            }
          );
        }
      },
      immediate: true,
    },
  },
};
</script>
 
<style scoped>
a {
  text-decoration: none;
  cursor: pointer;
}

.typeContainer {
  padding: 40px 0;
  border-bottom: 1px solid #ccc;
}
.typeContainer .titleName {
  font-size: 2em;
}

.articleList {
  position: relative;
  padding-bottom: 40px;
}
.articleList .title {
  font-size: 32px;
  margin: 20px 0;
  color: #333;
  font-weight: 300;
  width: auto;
}
.articleList .title:hover {
  color: #2479cc;
}
.articleList .time {
  position: absolute;
  top: 0;
  right: 0;
  color: #bbb;
  font-size: 14px;
}
.articleList .content {
  margin: 10px 0;
  line-height: 1.8;
}
.articleList .descript {
  position: absolute;
  bottom: 20px;
  color: #2479cc;
  cursor: pointer;
}
.articleList .read {
  position: absolute;
  bottom: 20px;
  left: 130px;
  color: #2479cc;
  cursor: pointer;
}
.articleList span {
  position: absolute;
  width: 100%;
  height: 1px;
  background: #ccc;
  bottom: 0;
}
</style>